<template>
    <div class="publicityList">
        <div class="top">
            <div class="dev-width search">
                <span class="title">交易公示专栏</span>
                <Row>
                    <Col :span="16" offset="4">
                    <Input class="search_input" v-model.trim="name" @keyup.enter.native="searchBykeyword" placeholder="请输入项目名称或者转让方名称">
                    <span slot="prepend">
                        <Icon type="ios-search-strong"></Icon>
                    </span>
                    <span slot="append" @click="searchBykeyword">搜索</span>
                    </Input>
                    </Col>
                </Row>

            </div>
        </div>
        <div class="dev-width container">
            <div class="banner">
                <div class="title">交易流程公告图</div>
                <img src="../../assets/images/gongshi.png">
            </div>
            <Row class="option">
                <Col span="8" class="title">
                <div>公示列表</div>
                </Col>
                <Col span="16" class="box">
                <DatePicker type="date" :value="beginDate" @on-change="handleChange" format="yyyy-MM-dd" placeholder="起始日期" style="width: 150px"></DatePicker>
                -
                <DatePicker type="date" :value="endDate" @on-change="handleChange1" format="yyyy-MM-dd" placeholder="结束日期" style="width: 150px;margin-right:5px"></DatePicker>
                <Button type="primary" icon="ios-search" @click="searchByDate">搜索</Button>
                </Col>
            </Row>
            <Row v-if="list.length==0" class="empty">
                <Col :span="24"> 暂无数据
                </Col>
            </Row>
            <Row :gutter="16" v-else>
                <Col :span="12" class="item" v-for="(item,index) in list" :key="index">
                <div class="div">
                    <div class="title">
                        <nuxt-link :to="{path:`/publicity/${item.id}`}">{{item.name}}
                        </nuxt-link>
                    </div>
                    <Row>
                        <Col :span="12">
                        <span class="strong">转让方:</span>
                        <span>{{item.assignor}}</span>
                        </Col>
                        <Col :span="12">
                        <span class="strong">拟交易价格:</span>
                        <span class="price">{{item.price}}万元</span>
                        </Col>
                    </Row>
                    <Row>
                        <Col :span="12">
                        <span class="strong">公示开始日期:
                        </span>
                        <span>{{item.startAt}}</span>
                        </Col>
                        <Col :span="12" v-if="item.status=='03'">
                        <span class="strong">剩余天数:</span>
                        <span>{{item.remainDays}}</span>
                        </Col>
                        <Col :span="12" v-if="item.status=='06'">
                        <span class="price">公示已结束</span>
                        </Col>
                    </Row>
                </div>
                </Col>
            </Row>
            <div class="center-page" v-if="totals>0">
                <mypager :total="totals" :rows="rows" :current="page" @change="change"></mypager>
            </div>
        </div>
    </div>
</template>
<script>
import portal from "~/net/portal"
import mypager from "~/components/Mypager"
const row = 20;
export default {
    name: 'publicityList',
    data() {
        return {
            name: '',
            beginDate: '',
            endDate: '',
            totals: 0,
            page: 1,
            rows: row,
        }
    },
    components: {
        mypager
    },
    async asyncData(context) {
        var param = {
            page: 1,
            row: row
        }
        let resp = await portal.getPublicityListingsPage({
            query: param,
            client: context.req
        })
        return {
            list: resp.data.rows,
            totals: resp.data.total
        }
    },
    methods: {
        change(page) {
            this.page = page;
            var param = {
                name: this.name,
                beginDate: this.beginDate,
                endDate: this.endDate,
                page: this.page,
                row: this.rows
            }
            this.search(param);
        },
        handleChange(date) {
            this.beginDate = date;
        },
        handleChange1(date) {
            this.endDate = date;
        },
        searchBykeyword() {
            this.page = 1;
            var param = {
                name: this.name,
                page: this.page,
                row: this.rows
            }

            this.search(param)
        },

        searchByDate() {
            this.page = 1;
            if (this.beginDate == '' || this.endDate == '') {
                this.$Message.error('日期不能为空')
                return;
            }
            if (this.beginDate > this.endDate) {
                this.$Message.error('结束日期无效')
                return;
            }
            var param = {
                name: this.name,
                beginDate: this.beginDate,
                endDate: this.endDate,
                page: this.page,
                row: this.rows
            }
            this.search(param)
        },

        search(param) {
            portal.getPublicityListingsPage({ query: param }).then(res => {
                this.page = 1;
                if (res.data.rows) {
                    this.list = res.data.rows;
                    this.totals = res.data.total;
                }
                else {
                    this.list = []
                    this.totals = 0
                }
            })
        }

    }
}
</script>
<style lang="less">
.publicityList {
  .top {
    text-align: center;
    background: #2489f3;
    height: 150px;
    .search {
      .title {
        color: white;
        line-height: 72px;
        font-size: 36px;
      }
      .search_input {
        height: 40px;
        .ivu-input-group-prepend {
          border-radius: 0px;
          background-color: white;
          border-right: 0;
          span {
            padding: 8px;
            i {
              font-size: 20px;
            }
          }
        }
        .ivu-input {
          height: 40px;
          line-height: 40px;
          border-left: 0px;
        }

        .ivu-input-group-append {
          border-radius: 0px;
          background-color: #f8f8f9;
          cursor: pointer;
          span {
            padding: 18px;
            font-size: 16px;
            color: #6a6a6a;
          }
        }
      }
    }
  }
  .container {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 5px;
    .banner {
      background: #f0f7ff;
      border: 1px solid #bed0de;
      .title {
        border-bottom: 4px solid #d2e2f1;
        font-size: 20px;
        font-weight: 800;
        height: 46px;
        line-height: 46px;
      }
      img {
        padding: 20px;
      }
    }
    .option {
      border-bottom: 1px solid #848e97;
      padding: 5px 0px;
      .title {
        border-left: 4px solid #2849f3;
        font-size: 18px;
        font-weight: 800;
        text-align: left;
        padding-left: 10px;
        line-height: 35px;
      }
      .box {
        text-align: right;
        button {
          width: 95px;
          height: 35px;
        }
      }
    }

    .empty {
      margin: 120px 0;
    }
    .item {
      margin-top: 8px;
      .div {
        border: 1px solid #dddee1;
        .title {
          background: #f8f8f9;
          line-height: 36px;
          height: 36px;
          font-weight: 800;
          font-size: 18px;
          text-align: left;
          padding-left: 8px;
        }
        .ivu-row {
          line-height: 50px;
          height: 50px;
          text-align: left;
          font-size: 14px;
          span {
            color: #4e5466;
          }
          .strong {
            letter-spacing: 1px;
            color: #8b93aa;
          }
          .price {
            color: red;
          }
        }
      }
    }
  }
  .center-page {
    text-align: center;
    margin: 40px 0 54px;
  }
}
</style>


